<template>
  <div>
    <div class="page">
      <div class="top-div">
        <el-button type="primary" @click="addGroupPoup" plain>添加分组</el-button>
      </div>
      <div class="body-div">
        <el-table
          :data="tableData"
          height="550"
          border
          style="width: 100%">
          <el-table-column
            prop="groupName"
            label="分组">
          </el-table-column>
          <el-table-column
            prop="className"
            label="班级">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="修改分组"
            width="100">
            <template slot-scope="scope">
              <el-button slot="reference" @click="changeGroupClick(scope.row)"
                         type="text" size="small">
                修改分组信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="删除分组"
            width="100">
            <template slot-scope="scope">
              <el-popconfirm
                @confirm="deleteGroupClick(scope.row)"
                title="确定删除吗？">
                <el-button slot="reference"
                           type="text" size="small">
                  删除分组
                </el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="创建分组" :visible.sync="groupPoup">
        <el-form ref="form" :model="groupForm" label-width="120px">
          <el-form-item label="分组名字" >
            <el-input v-model="groupForm.groupName"></el-input>
          </el-form-item>
          <el-form-item label="所属班级" >
            <el-select v-model="groupForm.classId" placeholder="请选择班级">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createGroup" >立即创建</el-button>
            <el-button @click="groupPoup = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="修改分组信息" :visible.sync="changeGroupTag.tag">
        <el-form ref="form" :model="changeGroupTag.groupMsg" label-width="120px">
          <el-form-item label="分组名字" >
            <el-input v-model="changeGroupTag.groupMsg.groupName"></el-input>
          </el-form-item>
          <el-form-item label="所属班级" >
            <el-select v-model="changeGroupTag.groupMsg.classId" placeholder="修改班级">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changeGroup" >立即修改</el-button>
            <el-button @click="changeGroupTag.tag = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {
  createGroupByPost,
  getGroupListByGet,
  deleteGroupByGet,
  changeGroupByPost,
  getClassListByGet
} from '../../config/index';

  // 基于班级管理对应组
  export default {
    data(){
      return{
        classList: [],
        groupPoup: false,
        groupForm: {
          classId: '',
          groupName: ''
        },
        formLabelWidth: '120px',
        tableData: [{
          groupName: '分组1',
          className: '班级1'
        }],
        changeGroupTag: { // 修改分组标记
          tag: false, // 是否修改
          groupMsg: { // 要修改的分组信息
          }
        }
      }
    },
    methods: {
      changeGroupClick(row){
        // console.log(row)
        // row: {classId: 1, className:'软件工程' , groupName:'永无bug', id:1}
        this.changeGroupTag.tag = true; // 代表要去修改分组信息
        this.changeGroupTag.groupMsg = row; // 要修改的分组信息
      },
      changeGroup(){
        var _this = this;
        // 真的要触发修改分组操作
        // 创建分组
        var res = changeGroupByPost({
          "id": this.changeGroupTag.groupMsg.id + "",
          "classId": this.changeGroupTag.groupMsg.classId + "",
          "groupName": this.changeGroupTag.groupMsg.groupName
        });
        res.then((res)=>{
          if(res.status == 200){
            //  修改成功, 刷新分组列表, 关闭弹窗
            _this.changeGroupTag.tag = false
            _this.getGroupList()
          }else{
            // 其它状态, 弹窗提示
            this.$alert(res.errorMsg, '注意', {
              showConfirmButton: false,
              callback: action => {}
            });
          }
        }).catch((e)=>{
          console.log("changeGroupByPost: 失败",e);
        })
      },
      deleteGroupClick(row) {
        var _this = this;

        // 删除分组
        var res = deleteGroupByGet(row.id);
        res.then((res)=>{
          if(res.status == 200){
            // 删除之后, 刷新分组列表
            _this.getGroupList()
          }
        }).catch((e)=>{
          console.log("deleteGroupByGet: 失败",e);
        })
      },
      addGroupPoup(){
        this.groupPoup = true
      },
      createGroup(){
        var _this = this;

        // 判断参数合法
        if (this.groupForm.classId == '' || this.groupForm.groupName == ''){
          // 不合法则给弹窗提示
          this.$alert('请完整输入组名和进行班级选择', '注意', {
            showConfirmButton: false,
            callback: action => {}
          });
          return
        }

        // 创建分组
        var res = createGroupByPost({
          "classId": this.groupForm.classId + "",
          "groupName": this.groupForm.groupName
        });
        res.then((res)=>{
          if(res.status == 200){
            // 创建成功, 刷新分组列表, 关闭弹窗
            _this.groupPoup = false
            _this.getGroupList()
          }
        }).catch((e)=>{
          console.log("createGroupByPost: 失败",e);
        })
      },
      getGroupList(){
        var _this = this;
        // 获取分组列表
        var res = getGroupListByGet();
        res.then((res)=>{
          if(res.status == 200){
            // 把新分组列表, 赋值给 tableData
            _this.tableData = res.data;
          }
        }).catch((e)=>{
          console.log("getGroupListByGet: 失败",e);
        })
      },
      getClassList(){
        var _this = this;
        // 获取班级列表
        var res = getClassListByGet();
        res.then((res)=>{
          if(res.status == 200){
            // 把新班级列表, 赋值给 tableData
            _this.classList = res.data;
          }
        }).catch((e)=>{
          console.log("getClassList: 失败",e);
        })
      }
    },
    mounted() {
      this.getGroupList()
      this.getClassList()
    }
  }
</script>

<style scoped>
  .page{
    width: 100%;
    height: 100%;
  }
  .top-div{
    height: 50px;
    padding: 30px 30px 10px;
  }
  .body-div{
    padding: 0 30px;
  }
</style>
